import React from "react";
import { render } from "react-dom";
let data = ["img/img_01.jpg", "img/img_02.jpg", "img/img_03.jpg", "img/img_04.jpg"];
class Banner extends React.Component {
    constructor(props) {
        super(props)
        // this.num = 0;
        this.state = {
            list: props.list,
            num:0
        };
        // console.log(this.state)
    }
    render() {
        return <div className="banner">
            <ul>
                {
                    this.state.list.map((item, index) => {
                        let oDom = null;
                        this.state.num === index ? oDom = <li key={index}><img src={item} alt="" /></li> : oDom = null
                        return oDom
                    })
                }
            </ul>
            <ol className="btn">
                {
                    this.state.list.map((item, index) => {
                        if(this.state.num === index){
                            return <li key={index} className="active">{index + 1}</li>
                        }else{
                            return <li key={index}>{index + 1}</li>
                        }
                        
                    })
                }
            </ol>
            <div className="btns">
                <span onClick={this.delNum.bind(this)}>
                    &lt;
                </span>
                <span onClick={this.addNum.bind(this)}>
                    &gt;
                </span>
            </div>
        </div>
    }
    addNum() {
        this.state.num++;
        if (this.state.num > this.state.list.length - 1) {
            this.state.num = 0;
        }
        this.setState({num:this.state.num})
        // console.log(this.state.num)
    }
    delNum() {
        this.state.num--;
        if (this.state.num < 0) {
            this.state.num = this.state.list.length - 1;
        }
        this.setState({num:this.state.num})
    }
}
render(<Banner list={data} />, document.getElementById("box"))